import React, { useEffect, useState } from 'react';
import Tables from '../../../component/Tables';
import { Button, Form, Input, ConfigProvider, Space, Switch,Select } from 'antd';

import '../../../style/vipgrade.scss'
import { vipgrade } from '../../../utils/Vipmanagr';

function Vipgrade(props) {
    const columns = [
        {
            title: '等级',
            dataIndex: 'grade',
            align: "center",
            render: (text) => (
                <span style={{color:"orange"}}>{text}</span>
            ),

        },
        {
            title: '等级名称',
            dataIndex: 'gname',
            align: "center"
        },
        {
            title: '成长值',
            dataIndex: 'growvalue',
            align: "center",
        },
        {
            title: '等级权益',
            dataIndex: 'power',
            align: "center"
        },
        {
            title: '升级礼包',
            dataIndex: 'gift',
            align: "center"
        },
        {
            title: '等级状态',
            dataIndex: 'amount',
            align: "center",
            render: (_, record) => (
                <Switch defaultChecked />
            ),
        },
        {
            title: '最后操作时间',
            dataIndex: 'endtime',
            align: "center"
        },
        {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            render: (_, record) => (
                <Space size="middle">
                    <a>编辑</a>
                </Space>
            ),
        },
    ];
    // 表单数据
    var [data,setData] = useState([]);
    // 挂载期
    useEffect(()=>{
        vipgrade().then((res)=>{
            setData(res.data)
        })
    },[])
    // 表单提交成功的回调
    const onFinish = (values) => {
            vipgrade({ key_like: values.gradename }).then((res) => {
                setData(res.data)
            })
    };
    // 表单提交失败的回调
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className='vipgrade'>
            <div className='gradebox'>
                <div className='gradeboxheader'>
                    <span>会员管理 / 会员等级管理</span>
                    <h2>会员等级管理</h2>
                </div>
                <div className='gradeboxoption'>
                    <Form
                        layout="inline"
                        name="basic"
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                    >
                        <div>
                            <Form.Item label="等级名称" name="gradename" rules={[]} className="item i2">
                                <Select
                                    defaultValue={'全部'}
                                    style={{ width: 200 }}
                                    options={[
                                        {
                                            value: '',
                                            label: '全部',
                                        },
                                        {
                                            value: 1,
                                            label: '普通会员',
                                        },
                                        {
                                            value: 2,
                                            label: '银卡会员',
                                        },
                                        {
                                            value: 3,
                                            label: '金卡会员',
                                        },
                                        {
                                            value: 4,
                                            label: '白金会员',
                                        },
                                        {
                                            value: 5,
                                            label: '铂金会员',
                                        },
                                        {
                                            value: 6,
                                            label: '至尊会员',
                                        },
                                    ]}
                                />
                            </Form.Item>
                            <Form.Item className="item">
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                            </Form.Item>
                        </div>
                    </Form>
                </div>
            </div>
            <div className="gradelist">
                <div className='action'>
                    <span className='atitle'>会员列表</span>
                    <Button type="primary">+新建</Button>
                </div>
                <Tables columns={columns} status={0} data={data} ></Tables>
            </div>
        </div>
    );
}
export default Vipgrade;